<template>
    <!-- 添加或理货作业对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <!--el-form-item v-if="showBundle" label="捆包号" prop="bundleNumber">
          <el-input v-model="form.bundleNumber" placeholder="请输入捆包号" :disabled="true" />
        </el-form-item-->

        <el-form-item label="园区信息" prop="logisticsParkName">
          <el-select ref="optionRef" v-model="form.logisticsParkName" placeholder="请选择园区信息" style="width: 340px;" @change="handleChangeLogisticsPark">
            <el-option
              v-for="dict in parkLocateOptions"
              :key="dict.locateId"
              :label="dict.name"
              :value="dict.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓位信息" prop="warehouseLocateName">
          <el-select v-model="form.warehouseLocateName" placeholder="请选择仓位信息" style="width: 340px;" @change="handleChangeWarehouseLocate">
            <el-option
              v-for="dict in warehouseLocateOptions"
              :key="dict.locateId"
              :label="dict.name"
              :value="dict.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区位信息" prop="regionLocateName">
          <el-select v-model="form.regionLocateName" placeholder="请选择区位信息" style="width: 340px;" @change="handleChangeRegionLocate">
            <el-option
              v-for="dict in regionLocateOptions"
              :key="dict.locateId"
              :label="dict.name"
              :value="dict.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="货位信息" prop="goodsLocateName">
          <el-select v-model="form.goodsLocateName" placeholder="请选择货位信息" style="width: 340px;" @change="handleChangeGoodsLocate">
            <el-option
              v-for="dict in goodsLocateOptions"
              :key="dict.locateId"
              :label="dict.name"
              :value="dict.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <!--el-form-item label="层位信息" prop="layerLocateName">
          <el-select v-model="form.layerLocateName" placeholder="请选择层位信息">
            <el-option
              v-for="dict in dict.type.sys_yes_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.label"
            ></el-option>
          </el-select>
        </el-form-item-->
        <el-form-item label="库位信息" prop="warehouseTotalLocate">
          <el-input v-model="form.warehouseTotalLocate" placeholder="请输入库位信息" />
        </el-form-item>

        <!--el-form-item label="理货人" prop="adjustGoodsPerson">
          <el-input v-model="form.adjustGoodsPerson" placeholder="请输入理货人" />
        </el-form-item-->
        <el-form-item label="理货时间" prop="adjustGoodsTime">
          <el-date-picker clearable
            v-model="form.adjustGoodsTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择理货时间"
            style="width: 340px;">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

</template>

<script>
import { listTally, getTally, delTally, addTally, updateTally, updateTallyExt } from "@/api/goods/tally";
//import { listCustomerOption } from "@/api/customs/custom";
//import { listFlowOption, updateFlow } from "@/api/system/flow";
import { listLocateOption } from "@/api/locates/locate";
import { isNotNull } from "@/utils/validate";
import store from '@/store'

export default {
  name: "Tally",
  dicts: ['check_status', 'warehouse_type', 'sys_yes_no', 'settlement_mode', 'price_mode', 'distribute_goods_status', 'goods_type', 'inventory_status'],
  data() {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,

      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,

      // 表单参数
      form: {},

      // 字典项园区信息
      parkLocateOptions: [],
      // 字典项仓位信息
      warehouseLocateOptions: [],
      // 字典项区位信息
      regionLocateOptions: [],
      // 字典项货位信息
      goodsLocateOptions: [],
      // 是否显示捆包号
      //showBundle: true,
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getOption();
  },
  methods: {
    init(open, title, single, ids) {
      this.open = open;
      this.title = title;
      this.single = single;
      this.ids = ids;
      this.reset();
      this.$set(this.form, 'adjustGoodsPerson', store.getters.nickName);
      this.$set(this.form, 'adjustGoodsTime', this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'));
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        //goodsId: null,
        //bundleNumber: null,
        warehouseType: null,
        logisticsParkName: null,
        warehouseLocateName: null,
        regionLocateName: null,
        goodsLocateName: null,
        layerLocateName: null,
        warehouseTotalLocate: null,
        adjustGoodsPerson: null,
        adjustGoodsTime: null,
      };
      this.resetForm("form");
    },

    /** 提交按钮 */
    submitForm() {
      const goodsIds = this.ids;
      updateTallyExt(goodsIds, this.form).then(response => {
        this.$modal.msgSuccess("成功");
        this.open = false;
        this.$parent.getList();
      });
    },

    getOption() {
      /** 字典项园区 */
      listLocateOption(0).then(response => {
        this.parkLocateOptions = response.data;

//        console.log('this.parkLocateOptions',this.parkLocateOptions);
      });
    },
    handleChangeLogisticsPark(value) {
//      console.log('handleChangeLogisticsPark', value);
//      console.log('this.$refs.optionRef.selected.value', this.$refs.optionRef.selected.value);
//      console.log('this.$refs.optionRef.selected.label', this.$refs.optionRef.selected.label);
//      console.log('this.$refs.optionRef.selected.key', this.$refs.optionRef.selected.key);
      let park = {};
      park = this.parkLocateOptions.find((item) => {
        return item.name === value; //筛选出匹配数据
      });
//      console.log('park', park);
//      this.form.logisticsParkName = value.name;
//      console.log('handleChangeLogisticsPark', label);
      /** 字典项仓库 */
      listLocateOption(park.locateId).then(response => {
        this.warehouseLocateOptions = response.data;
        this.regionLocateOptions = {};
        this.goodsLocateOptions = {};
        this.form.warehouseLocateName = '';
        this.form.regionLocateName = '';
        this.form.goodsLocateName = '';
        this.form.warehouseTotalLocate = '';
        this.form.warehouseType = '';
//        console.log('this.warehouseLocateOptions',this.warehouseLocateOptions);
      });
    },
    handleChangeWarehouseLocate(value) {
//      console.log('handleChangeWarehouse', value);
      let warehouse = {};
      warehouse = this.warehouseLocateOptions.find((item) => {
        return item.name === value; //筛选出匹配数据
      });
      this.$set(this.form, 'warehouseType', warehouse.warehouseType);
//      console.log('warehouse', warehouse);
      /** 字典项区位 */
      listLocateOption(warehouse.locateId).then(response => {
        this.regionLocateOptions = response.data;
        this.goodsLocateOptions = {};
        this.form.regionLocateName = '';
        this.form.goodsLocateName = '';
//        console.log('this.regionLocateOptions',this.regionLocateOptions);
      });
      this.handleChangeGoodsLocate();
    },
    handleChangeRegionLocate(value) {
//      console.log('handleChangeWarehouse', value);
      let region = {};
      region = this.regionLocateOptions.find((item) => {
        return item.name === value; //筛选出匹配数据
      });
//      console.log('region', region);
      /** 字典项货位 */
      listLocateOption(region.locateId).then(response => {
        this.goodsLocateOptions = response.data;
        this.form.goodsLocateName = '';

//        console.log('this.goodsLocateOptions',this.goodsLocateOptions);
      });
      this.handleChangeGoodsLocate();
    },
    handleChangeGoodsLocate(value) {
      this.form.warehouseTotalLocate = this.form.logisticsParkName + this.form.warehouseLocateName + this.form.regionLocateName + this.form.goodsLocateName;
    },

  }
};
</script>
